<template>
  <div>
  <div class="container">
 <p>今天是<span class="span1"> 2022 </span >年<span class="span1"> 12 </span>月<span class="span1"> 31 </span>日</p>
 <p>这是我们的第一个跨年</p>
  </div>
  <div class="footer">
    <img @click="goToCountPage" target="点击有惊喜噢~" alt="点击有惊喜噢~" class="heZhao" src="../assets/time-1.jpg">
  </div>
  <!-- 各种图标 -->
  <img class="star_1" src="../assets/start-1.png" alt="">
  <img class="star_2" src="../assets/star_2.png" alt="">
  <img class="star_3" src="../assets/star_3.png" alt="">
  <img class="star_4" src="../assets/star_3.png" alt="">
  <img class="star_5" src="../assets/star_3.png" alt="">
  <img class="star_6" src="../assets/star_3.png" alt="">
  <img class="talk_1" src="../assets/talk_1.png" alt="">
  <img class="talk_2" src="../assets/talk_1.png" alt="">
  <img class="heart_1" src="../assets/heart_1.png" alt="">
  <img class="heart_2" src="../assets/heart_1.png" alt="">
<!-- <cardPage v-show="show">
  <template #title>
   <h2>这是标题</h2>
  </template>
  <template #content>
   <span>这是内容</span>
  </template>
</cardPage > -->
  </div>
</template>

<script>
// import cardPage from '../components/cardPage.vue'
export default {
  // components: { cardPage },
  data: function () {
    return {
      // show: false
    }
  },
  methods: {
    goToCountPage () {
      this.$alert('<p>想你</p><p>很想你</p><p>贼拉想你</p>', '论皮卡丘的口头禅', {
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.$router.push('./countPage')
      }
      )
      // this.show = true
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  margin-top: 20px;
  text-align: center;
  /* background-color: yellow; */
  font-size: 70px;
  font-family: fantasy;
}
.span1{
  color: pink;
}
.footer{
  /* margin-top: 10px; */
  /* background-color: skyblue; */
  height: calc(100vh - 184px)
}
.heZhao{
  cursor: pointer;
 height: 100%
}
.star_1{
  position: fixed;
  top: 0px;
  right: 50px;
}
.star_2{
  position: fixed;
  top: 40px;
  left: 40px;
}
.star_3{
  width: 100px;
  position: fixed;
  bottom: 40px;
  left: 300px;
}
.star_4{
  width: 130px;
  position: fixed;
  bottom: 80px;
  left: 80px;
}
.star_5{
  width: 100px;
  position: fixed;
  bottom: 40px;
  right: 300px;
}
.star_6{
  width: 130px;
  position: fixed;
  bottom: 80px;
  right: 80px;
}
.talk_1{
  position: fixed;
  transform:rotateY(-180deg);
  bottom: 220px;
  left: 160px;
  width: 200px;
}
.heart_1{
  position: fixed;
  transform:rotateY(-180deg);
  bottom: 270px;
  left: 205px;
  width: 105px;
}
.talk_2{
  position: fixed;
  bottom: 220px;
  right: 160px;
  width: 200px;
}
.heart_2{
  position: fixed;
  bottom: 270px;
  right: 205px;
  width: 105px;
}
</style>
